<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/common :: common_head('我的信息')"></head>
<head>
  <link rel="stylesheet" th:href="@{/css/front/learner-information.css}">
</head>
<body>
  <!-- 引入公共的导航部分 -->
  <header th:include="common/common :: common_header('','我的信息')"></header>

  <article id="app">
    <div class="layui-container">
      <div class="layui-row layui-col-space10">
        <div class="layui-col-md4">
          <div class="layui-card">
            <div class="layui-card-header">我的照片</div>
            <div class="layui-card-body" style="text-align: center">
              <div class="layui-anim layui-anim-scale">
                <img :src="userImage" width="90%" height="90%" alt="">
              </div>
            </div>
            <div class="layui-card-header" style="padding-bottom: 10px;padding-top: 10px;">
              <button type="button" class="layui-btn " style="width: 90%;" @click="updateImage">修改照片</button>
            </div>
          </div>
        </div>
        <div class="layui-col-md8">
          <div class="layui-card">
            <div class="layui-card-header">个人信息</div>
            <div class="layui-card-body">
              <table class="layui-table" lay-size="lg">
                <colgroup>
                  <col width="100">
                  <col width="300">
                  <col>
                </colgroup>
                <tbody>
                  <tr>
                    <td>姓名</td>
                    <td>{{userName}}</td>
                  </tr>
                  <tr>
                    <td>手机号码</td>
                    <td>{{userPhone}}</td>
                  </tr>
                  <tr>
                    <td>身份证号</td>
                    <td>{{userNumber}}</td>
                  </tr>
                  <tr>
                    <td>邮箱账号</td>
                    <td>{{userEmail}}</td>
                  </tr>
                  <tr>
                    <td>注册时间</td>
                    <td>{{created}}</td>
                  </tr>
                  <tr>
                    <td><button type="button" class="layui-btn " style="width: 80%;" @click="searchScore">查看最近一次成绩</button></td>
                    <td>{{subject}} {{time}}{{score}}</td>

                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </article>
</body>
</html>
<script>
  const app = new Vue({
    el:"#app",
    data: {
      userName: '',
      userPhone: '',
      userEmail: '',
      userNumber: '',
      userImage: '',
      created: '',
      score: '',
      time:'',
      identity:'',
      subject:''
    },
    methods: {
      getMyInformation: function (){
        let _this = this;
        _this.$http.get('/user/getMyInformation').then(function (user){
          let user_json = JSON.parse(user.body);
          _this.userName = user_json.userName;
          _this.userPhone = user_json.userPhone;
          _this.userEmail = user_json.userEmail;
          _this.userNumber = user_json.userNumber;
          _this.userImage = user_json.userImage;
          _this.created = user_json.created;

        });
      },
      searchScore:function(){
        let _this = this;
        _this.$http.get('/user/searchScore').then(function (grade){
          let grade_json = JSON.parse(grade.body);
          _this.subject = grade_json.gradeSubject+'  ';
          _this.score = '  成绩: '+grade_json.gradeScore+'分';
          _this.time='考试用时：'+grade_json.gradeExamTime+'秒   ';


        });
      },
      updateImage: function (){
        layui.use(['layer','upload'], function(){
          let layer = layui.layer;
          let upload = layui.upload;
          let $ = layui.$;
          layer.open({
            type: 1,
            area: ['500px', '300px'],
            offset: '150px',
            closeBtn: false,
            shadeClose: true,
            content: `
              <div class="layui-upload-drag" id="uploadImage" style="width: 438px;height: 195px;">
                <i class="layui-icon"></i>
                <p>点击上传，或将图片拖拽到此处</p>
                <div class="layui-hide" id="uploadDemoView">
                  <hr>
                  <img id="myImage" src="" alt="上传成功后渲染" style="width: 438px;">
                </div>
              </div>
            `
          });

          //执行实例
          let uploadInst = upload.render({
            elem: '#uploadImage' //绑定元素
            ,url: '/question/uploadImage' //上传接口
            ,done: function(res){
              app.$data.userImage = res.msg;
              //发送ajax请求修改数据库中的照片信息
              app.$http.post('/user/updateImage',{
                'userImage':res.msg
              });
              //上传完毕回调
              layer.msg('上传成功',{time:500},function (){
                layer.closeAll();
              });
            }
          });
        });
      }
    },
    mounted: function (){
      this.getMyInformation();
    }
  })
</script>